<template>
    <div id="main">
        <div class="box">
            <input type="text" autofocus="autofocus" placeholder="" v-model="input" maxlength="25" />
            <img src="@/assets/image/search@3x.png" alt="" />
            <img src="@/assets/image/scanning@3x.png" alt="" />
            <button @click="search">搜索</button>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
    name: 'Search',
    setup(props, ctx) {
        const input = ref('')
        const search = () => {
            ctx.emit('search', input.value)
        }
        onMounted(() => {})
        return {
            input,
            search
        }
    }
})
</script>

<style scoped lang="scss">
#main {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 82px;
    background-color: white;

    .box {
        position: relative;
        width: 90%;
        margin: 0 auto;
        // 输入框
        input {
            width: calc(100% - 110px);
            height: 40px;
            padding: 0 55px;
            margin: 20px 0;
            background-color: #f9fafb;
            border: none;
            border-radius: 20px;
            outline: none;
        }

        img {
            position: absolute;
            top: 31px;
            width: 20px;
            height: 20px;
        }

        > img:nth-of-type(1) {
            left: 20px;
        }

        > img:nth-of-type(2) {
            right: 78px;
        }

        button {
            position: absolute;
            top: 24px;
            right: 4px;
            width: 68px;
            height: 32px;
            font-size: 15px;
            color: white;
            text-align: center;
            background-color: #0fbda6;
            border: none;
            border-radius: 16px;
            outline: none;
        }
    }
}
</style>
